<template>
   <div >
      <div class="Cards flex" v-for="Articles in SquareArticle"  :key="Articles.id" :ref="'Cards:'+Articles.id">
<!--           
          <div v-for="item in Articles.data"  :key="item.articleid" class="CardBox"
                style="backgound:red" :ref="'Card:'+item.articleid"> -->
                 <!-- v-if="CardState(Articles.formState,item.formState)" -->
               <!-- <Card   class="Card" v-for="(item,index) in Articles.data" :key="item.articleid"  :ref="'Card:'+item.articleid"  
                       v-show="CardState(Articles.formState,item.formState)"
                       :title="item.username" :subtitle="item.createdtime"  :item="item"
                       :CardsId='Articles.id' :index='index' :CardId='item.articleid' @unfold="unfold" @zoom='zoom'
                    >

                  <template slot="body">
                     
                     <div class="BackColor" ></div>
                     <div style="position:relative;z-index:5">
                        <Body :item="item" :CardsId='Articles.id' :index='index' @unfold="unfold" @zoom='zoom'/> 

                        <div id="title" class="overflow">{{item.title}}</div>                    
                        基础功能
                         <Fun :data="item" :CardId='item.articleid' :CardsId='Articles.id' :index='index'
                              @unfold="unfold" @zoom='zoom'/>
                     </div>
                  </template>
            </Card> -->
         </div>
   </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
import SlideShow from '@/components/Nouse/SlideShow.vue'
import Body from './Body/Body.vue'
import Fun from './Fun/Fun.vue'

  export default 
  {
     name :'', 
     components: { SlideShow, Body, Fun },
     data() {
      return {
          star:0,
          end:3,
          newSquareArticle:[],
          screenWidth:0,
       }
     },
     created(){
       this.init()
     },
     computed:{
        ...mapState('Article',['SquareArticle','SquareArticleInfo']),
        ...mapState('Setting',['Article']),
     },
     watch:{
        //监听屏幕大小
        screenWidth(newData){
           if(newData<=600 && this.SquareArticleInfo.devision!=1)
            return this.SETSQUAREARTICLEDEVISION(1)
            if(newData>600 && newData<=1000 && this.SquareArticleInfo.devision!=2)         
            return this.SETSQUAREARTICLEDEVISION(2)
           if(newData>1000 && this.SquareArticleInfo.devision!=3)
           return  this.SETSQUAREARTICLEDEVISION(3)
        }
     },
     methods:{
        ...mapMutations('Article',['SETSQUAREARTICLEDEVISION']),
        init(){  
            this.screenChage()
            console.log('sss')
        },
        //获取屏幕大小
        screenChage(){
            this.screenWidth = document.body.clientWidth
             window.onresize = () => {
               return (() => {
                  this.screenWidth = document.body.clientWidth
               })()
            }
            // this.$public.screenWidth
        },
        zoom(id,CardsId,index){ 
          let card='Card:'+id
          let cards='Cards:'+CardsId
          this.$refs[card][0].$el.className='Card zoom'
          this.$refs[cards][0].style.justifyContent='space-between'
          let newData=this.SquareArticle.find(item =>item.id==CardsId)
          newData.formState=0
          setTimeout(() => {
            this.$refs[card][0].$el.className='Card'
          }, 200);
  
        },
        unfold(id,CardsId,index) {
          let card='Card:'+id
          let cards='Cards:'+CardsId
          this.$refs[card][0].$el.className='Card unfold'
          if(index==1)
          this.$refs[cards][0].style.justifyContent='center'
          else if(index==2)
          this.$refs[cards][0].style.justifyContent='flex-end'
          
          let newData=this.SquareArticle.find(item =>item.id==CardsId)
          newData.formState=1
        },
        CardState( CardsState,CardState){  
            if(CardsState==0) return true
            if(CardState==1) return true
            return CardsState==CardState?true:false;
        }
        
      
    },
  }
</script>
<style scoped lang="less">
.retract{
   padding: 0 10px;
   box-sizing: border-box;
}
.Cards{
   width: 100%;
   box-sizing: border-box;
   flex-wrap: nowrap;
   justify-content: flex-start;
   overflow: hidden;
   justify-content: space-between;
  overflow: hidden;
   // justify-content: center;
}
.Card{
    width: 100%;
    padding: 20px;
    margin: 10px;
    box-sizing:border-box;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.2s;
}
// .Card:hover{
//    background: white;
// }



.BackColor{
   width: 100%;
   height: 100%;
   background: var(--ArticleBackColor);
   opacity: var(--ArticleOpacity);
   position: absolute;
   top: 0;left: 0;
   z-index: 0;
}
.unfold{
   animation: 0.2s unfold linear;
   // flex-shrink: 0;
}
.zoom{
   animation: 0.2s zoom linear;
   // flex-shrink: 0;
}

 @keyframes zoom{
    from{
        width: 200%;
    }
    to{
        width: 100%;
    }
}

 @keyframes unfold{
    from{
        width: 30%;
    }
    to{
        width: 100%;
    }
}





#title{
   color: skyblue;
   font-size: 18px;
   margin: 10px 5px;
   width: 100%;
   font-style: italic;
   font-weight: 600;
   letter-spacing: 1px;
}

</style>